<template>
	<view class="container">
		<tui-list-cell unlined :hover="false" >
			<view class="tui-flex-box" v-if="info!=null">
				<image :src="tui.imghost+'static/member/img/order_address31.png'" class="tui-icon-img"></image>
				<view class="tui-addr" v-if="info.pickup_type ==0">
					<view class="tui-addr-userinfo">{{info.username}}<text class="tui-addr-tel">{{info.tel}}</text></view>
					<view class="tui-addr-text">{{info.addr}}</view>
				</view>
				<view class="tui-addr" v-if="info.pickup_type ==1">
					<view class="tui-addr-text">店内自提</view>
				</view>
				
			</view>
		</tui-list-cell>

		<view class="tui-order-item" v-if="info">
			<tui-list-cell :hover="false" :lineLeft="false">
				<view class="tui-goods-title">
					商品信息
				</view>
			</tui-list-cell>
				<tui-list-cell padding="0" v-if="info.goods_list.length>0" v-for="(goods,idx) in info.goods_list">
					<view class="tui-goods-item">
						<image :src="goods.thumb" class="tui-goods-img"></image>
						<view class="tui-goods-center">
							<view class="tui-goods-name">{{goods.goods_name}}</view>
							<view class="tui-goods-attr">{{goods.desc}}</view>
							<view class="tui-goods-attr" v-if="goods.card>0">使用：{{goods.card_name}}</view>
						</view>
						<view class="tui-price-right">
							<view>￥{{goods.price}}</view>
							<view>x{{goods.num}}</view>
						</view>
					</view>
				</tui-list-cell>
			<view class="tui-goods-info">
				<view class="tui-price-flex tui-size24">
					<view>商品总额</view>
					<view>￥{{info.money}}</view>
				</view>
				<view class="tui-price-flex tui-size24">
					<view>账户扣款</view>
					<view>￥{{info.use_money}}</view>
				</view>
				<view class="tui-price-flex  tui-size24">
					<view>手动调价</view>
					<view>￥{{info.derate}}</view>
				</view>
				<!--
				<view class="tui-price-flex  tui-size24">
					<view>优惠券</view>
					<view>￥0.00</view>
				</view>
				<view class="tui-price-flex  tui-size24">
					<view>配送费</view>
					<view>￥0.00</view>
				</view> -->
				<!-- <view class="tui-price-flex tui-size32 tui-pbtm20">
					<view class="tui-flex-shrink">合计</view>
					<view class="tui-goods-price">
						<view class="tui-size-24">￥</view>
						<view class="tui-price-large">1192</view>
						<view class="tui-size-24">.00</view>
					</view>
				</view> -->
				<view class="tui-price-flex tui-size32">
					<view class="tui-flex-shrink">实付款</view>
					<view class="tui-goods-price tui-primary-color">
						<view class="tui-size-24">￥</view>
						<view class="tui-price-large" v-if="info.status>0">{{info.payable}}</view>
						<view class="tui-price-large" v-else>0.00</view>
					</view>
				</view>
			</view>
		</view>

		<view class="tui-order-info" v-if="info">
			<tui-list-cell :hover="false">
				<view class="tui-order-title">
					订单信息
				</view>
			</tui-list-cell>
			<view class="tui-order-content">
				<view class="tui-order-flex">
					<view class="tui-item-title">订单状态:</view>
					<view class="tui-item-content">{{getStatusText()}}</view>
				</view>
				<view class="tui-order-flex">
					<view class="tui-item-title">订单号:</view>
					<view class="tui-item-content">{{info.osn}}</view>
				</view>
				<view class="tui-order-flex">
					<view class="tui-item-title">物流单号:
					</view>
					<view @click="cx" class="tui-item-content">{{info.exp_number}}</view>
					<text style="" @click="mycopy">复制</text>
				</view>
				<view class="tui-order-flex">
					<view class="">追加的物流单号:
					</view>
				</view>
				<view class="tui-order-flex other" style="background-color: #f1f1f1;padding: 10px;" v-if="info.exp_other" v-for="(exp,index) in info.exp_other">
					<view class="tui-item-title2">{{exp.create_time}}</view>
					<view class="tui-item-content">【{{exp.exp_name}}】{{exp.exp_number}}</view>
					<text style="" @click="mycopy2(exp.exp_number)">复制</text>
				</view>
				<view class="tui-order-flex">
					<view class="tui-item-title">创建时间:</view>
					<view class="tui-item-content">{{info.create_time}}</view>
				</view>
				<view class="tui-order-flex">
					<view class="tui-item-title">付款时间:</view>
					<view class="tui-item-content">{{info.pay_time}}</view>
				</view>
				<view class="tui-order-flex">
					<view class="tui-item-title">配送方式:</view>
					<view class="tui-item-content" v-if="info.pickup_type==0">快递</view>
					<view class="tui-item-content" v-if="info.pickup_type==1">到店自提</view>
				</view>
				<view class="tui-order-flex">
					<view class="tui-item-title">订单备注: </view>
					<view class="tui-item-content">
						<text style="color: #0062CC;padding-left: 15px;" @click="editmemo">编辑</text>
					</view>
				</view>
				<view class="tui-order-flex" style="color: #666;" v-if="info && info.memo">
					{{info.memo}}
				</view >
				<view class="tui-order-flex" @click="qian">
					<view class="tui-item-title">欠货记录:</view>
					<view class="tui-item-content">查看</view>
				</view>
			</view>
		</view>
		<view class="tui-safe-area"></view>
		<!-- <view class="tui-tabbar tui-order-btn">
			<view class="tui-btn-mr">
				<tui-button type="black" :plain="true" width="152rpx" height="56rpx" :size="26" shape="circle">删除订单</tui-button>
			</view>
			<view class="tui-btn-mr">
				<tui-button type="danger" :plain="true" width="152rpx" height="56rpx" :size="26" shape="circle" @click="btnPay">立即支付</tui-button>
			</view>
		</view> -->
		<!-- <t-pay-way :show="show" @close="popupClose"></t-pay-way> -->
		<tui-modal :show="showmemoinput" custom :maskClosable="true" :padding="'40rpx 30rpx'">
			<view class="tui-modal-custom" style="">
				<view class="tui-modal-custom-text">
					<textarea
					@input="memoInput"
					 style="width: 100%;border: 1px solid #f2f2f2;background-color: #f2f2f2;" placeholder-style="color:#666" placeholder="填写备注信息" :value="memo"/>
				</view>
				<view class="tui-order-flex">
					<tui-button height="72rpx" width="200rpx" :size="28" type="white" shape="circle" @click="showmemoinput = false">取消</tui-button>
					<tui-button height="72rpx" width="200rpx" :size="28" type="danger" shape="circle" @click="handleClick">确定</tui-button>
				</view>
			</view>
		</tui-modal>
	</view>
</template>

<script>
	// import tPayWay from "@/components/views/t-pay-way/ti-pay-way"
	export default {
		// components: {
		// 	tPayWay
		// },
		onLoad(opt) {
			this.osn = opt.osn;
			this.oid = opt.oid;
		},
		onShow() {
			this.getInfo();
		},
		data() {
			return {
				//1-待付款 2-付款成功 3-待收货 4-订单已完成 5-交易关闭
				status: 1,
				oid:0,
				show: false,
				info:null,
				order_id:0,
				osn:null,
				memo:'',
				showmemoinput:false,
				// kuaid:'https://m.kuaidi100.com/result.jsp?nu='
			}
		},
		methods: {
			getInfo:function(){
				let data ={};
				if(this.oid){
					data={oid:this.oid};
				}
				if(this.osn){
					data={osn:this.osn};
				}
				this.tui.get('user/order/info',data).then(res=>{
					if(res.code == 0){
						uni.showModal({
							title:'提醒',
							content:res.msg,
							success(res) {
								uni.navigateBack()

							}
						})
						return;
					}
					res.data.memo == res.data.memo?res.data.memo:'';
					this.info = res.data
					this.memo =this.info.memo;
					
				});
			},
			memoInput(e){
				this.info.memo =e.detail.value;
				this.memo =e.detail.value;
				// console.log(e.detail);
			},
			cx:function(){
				// location.href= this.kuaid + this.info.exp_number;
				// this.tui.href("/pages/myOrder/exp?no="+this.info.exp_number);
				if(!this.info.exp_number){return;}
				uni.navigateTo({
					url:"exp?osn="+this.info.osn
				})
			},qian:function(){
				// location.href= this.kuaid + this.info.exp_number;
				if(!this.info.osn){return;}
				uni.navigateTo({
					url:"owe?osn="+this.info.osn
				})
			},
			getImg: function(status) {
				return this.webURL + ["img_order_payment3x.png", "img_order_send3x.png", "img_order_received3x.png",
					"img_order_signed3x.png", "img_order_closed3x.png"
				][status - 1]
			},
			getStatusText: function() {
				if (this.info.status >=0)
					return ["等待您付款", "已结清", "待收货", "已完成"][this.info.status];
				else return "订单作废"
			},
			getReason: function(status) {
				return ["剩余时间", "等待卖家发货", "还剩X天XX小时自动确认", "", "超时未付款，订单自动取消"][status - 1]
			},
			switchStatus() {
				let status = this.status + 1
				this.status = status > 5 ? 1 : status
				this.tui.toast("状态切换成功")
			},
			btnPay() {
				this.show = true
			},
			popupClose() {
				this.show = false
			},editmemo(){
				this.showmemoinput = true
			},handleClick(){
				this.tui.post('user/order/changememo',{memo:this.info.memo,id:this.info.id}).then(res=>{
					if(res.code == 1){
						this.tui.toast(res.msg);
						this.showmemoinput= false;
					}else{
						this.tui.toast(res.msg)
						this.showmemoinput= false;
					}
				})
			},mycopy(){
				uni.setClipboardData({
					data:this.info.exp_number,
					success() {
						uni.showToast({
							title:'复制成功'
						})
					}
				})
			},mycopy2(txt){
				uni.setClipboardData({
					data:txt,
					success() {
						uni.showToast({
							title:'复制成功'
						})
					}
				})
			}
		}
	}
</script>

<style>
	.container {
		padding-bottom: 118rpx;
	}

	.tui-order-header {
		width: 100%;
		height: 160rpx;
		position: relative;
		background-color: #EB0909;
	}

	.tui-img-bg {
		width: 100%;
		height: 160rpx;
	}

	.tui-header-content {
		width: 100%;
		height: 160rpx;
		position: absolute;
		z-index: 10;
		left: 0;
		top: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 70rpx;
		box-sizing: border-box;
	}

	.tui-status-text {
		font-size: 34rpx;
		line-height: 34rpx;
		color: #FEFEFE;
	}

	.tui-reason {
		font-size: 24rpx;
		line-height: 24rpx;
		color: rgba(254, 254, 254, 0.75);
		padding-top: 15rpx;
		display: flex;
		align-items: center;
	}

	.tui-reason-text {
		padding-right: 12rpx;
	}

	.tui-status-img {
		width: 80rpx;
		height: 80rpx;
		display: block;
	}

	.tui-flex-box {
		width: 100%;
		display: flex;
		align-items: center;
	}

	.tui-icon-img {
		width: 44rpx;
		height: 44rpx;
		flex-shrink: 0;
	}

	.tui-logistics {
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 0 24rpx 0 20rpx;
		box-sizing: border-box;
	}

	.tui-logistics-text {
		font-size: 26rpx;
		line-height: 32rpx;
	}

	.tui-logistics-time {
		font-size: 24rpx;
		line-height: 24rpx;
		padding-top: 16rpx;
		color: #666
	}

	.tui-addr {
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding-left: 20rpx;
		box-sizing: border-box;
	}

	.tui-addr-userinfo {
		font-size: 30rpx;
		line-height: 30rpx;
		font-weight: bold;
	}

	.tui-addr-text {
		font-size: 24rpx;
		line-height: 32rpx;
		padding-top: 16rpx;
	}

	.tui-addr-tel {
		padding-left: 40rpx;
	}

	.tui-order-item {
		margin-top: 20rpx;
		border-radius: 10rpx;
		overflow: hidden;
	}

	.tui-goods-title {
		width: 100%;
		font-size: 28rpx;
		line-height: 28rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}


	.tui-goods-item {
		width: 100%;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
	}

	.tui-goods-img {
		width: 180rpx;
		height: 180rpx;
		display: block;
		flex-shrink: 0;
	}

	.tui-goods-center {
		flex: 1;
		padding: 20rpx 8rpx;
		box-sizing: border-box;
	}

	.tui-goods-name {
		max-width: 310rpx;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		font-size: 26rpx;
		line-height: 32rpx;
	}

	.tui-goods-attr {
		font-size: 22rpx;
		color: #888888;
		line-height: 32rpx;
		padding-top: 20rpx;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.tui-price-right {
		text-align: right;
		font-size: 24rpx;
		color: #888888;
		line-height: 30rpx;
		padding-top: 20rpx;
	}

	.tui-color-red {
		color: #E41F19;
		padding-right: 30rpx;
	}

	.tui-goods-price {
		width: 100%;
		display: flex;
		align-items: flex-end;
		justify-content: flex-end;
		font-size: 24rpx;
	}

	.tui-size-24 {
		font-size: 24rpx;
		line-height: 24rpx;
	}

	.tui-price-large {
		font-size: 32rpx;
		line-height: 30rpx;
	}

	.tui-goods-info {
		width: 100%;
		padding: 30rpx;
		box-sizing: border-box;
		background: #fff;
	}

	.tui-price-flex {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.tui-size24 {
		padding-bottom: 20rpx;
		font-size: 24rpx;
		line-height: 24rpx;
		color: #888;
	}

	.tui-size32 {
		font-size: 32rpx;
		line-height: 32rpx;
		font-weight: 500;
	}

	.tui-pbtm20 {
		padding-bottom: 20rpx;
	}

	.tui-flex-shrink {
		flex-shrink: 0;
	}

	.tui-primary-color {
		color: #EB0909;
	}

	.tui-order-info {
		margin-top: 20rpx;
	}

	.tui-order-title {
		position: relative;
		font-size: 28rpx;
		line-height: 28rpx;
		padding-left: 12rpx;
		box-sizing: border-box;
	}

	.tui-order-title::before {
		content: '';
		position: absolute;
		left: 0;
		top: 0;
		border-left: 4rpx solid #EB0909;
		height: 100%;
	}

	.tui-order-content {
		width: 100%;
		padding: 24rpx 30rpx;
		box-sizing: border-box;
		background: #fff;
		font-size: 24rpx;
		line-height: 30rpx;
	}

	.tui-order-flex {
		display: flex;
		padding-top: 38rpx;
		justify-content: space-between;
	}

	.tui-item-title {
		width: 132rpx;
		flex-shrink: 0;
	}

	.tui-item-content {
		color: #666;
		line-height: 32rpx;
	}

	.tui-safe-area {
		height: 1rpx;
		padding-bottom: env(safe-area-inset-bottom);
	}

	.tui-tabbar {
		width: 100%;
		height: 98rpx;
		background: #fff;
		position: fixed;
		left: 0;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		font-size: 26rpx;
		box-shadow: 0 0 1px rgba(0, 0, 0, .3);
		padding-bottom: env(safe-area-inset-bottom);
		z-index: 996;
	}

	.tui-btn-mr {
		margin-right: 30rpx;
	}
	.tui-modal-custom-text{
		height: 100px;
		margin-bottom: 10px;
	}
	.tui-modal-custom-text textarea{height: 100px;}
</style>
